<template>
  <div>
    <hr>
    <h5>toRefs组件 --- </h5>
    <p>obj.name: {{ obj.name }} | obj.age: {{ obj.age }}</p>
    <p>name: {{ name }} | age: {{ age }}</p>
    <button @click="updateName">修改数据</button>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  name: "MToRefs",
  /**
   * toRefs 是函数, 转换响应式对象中所有属性为单独响应式数据, 对象成为普通对象
   *
   * 一般 toRefs 也是可以配置 ... 展开运算符使用的
   * 使用场景: 剥离响应式对象, 想使用响应式对象中的多个或所有属性作为响应式数据
   *
   * 注意:
   *  ...obj
   * 解构或展开运算符...响应式数据对象, 得到的数据并不是响应式数据了
   */
  setup() {
    // 1.响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 10
    })

    // {name: ObjectRefImpl, age: ObjectRefImpl}
    // {
    /*    "name": {
          "_object": {
            "name": "ls",
                "age": 10
          },
          "_key": "name",
              "__v_isRef": true
        },
        "age": {
          "_object": {
            "name": "ls",
                "age": 10
          },
          "_key": "age",
              "__v_isRef": true
        }
      }*/
    const refs = toRefs(obj);
    console.log(refs)
    const updateName = () => {
      refs.name.value = 'zid_pitter'
    }

    return {
      obj,    //  返回对象
      // 对象与展开运算符 ...obj 把对象obj的属性引用, 转移到一个新对象上面
      // ...obj  //  {name: "ls", age: 10}
      //
      ...refs,
      // ...toRefs(obj)
      updateName
    }
  }


}
</script>

<style scoped>

</style>
